<template>
  <view class="follow-shop-item">
    <template v-if="followList.length > 0">
    <view class="shop-item" v-for="shop in followList" :key="shop.shopId">
      <view class="cover">
        <image :src="shop.shopImg || '/static/logo.png'"></image>
      </view>
      <view class="info">
        <view class="shop-name">
          {{ shop.shopName }}
        </view>
        <view class="other">
          <view class="score">
            <text>综合评分：</text>
            <uniRate activeColor="#f7b804" :size="15" :disabled="true" :value='shop.appraisesScore'></uniRate>
          </view>
          <view class="follow-operation" @click="followShopHandle(shop.shopId)">
            取消关注
          </view>
        </view>
      </view>
    </view>
    </template>

    <template v-else>
      <view class="empty">
        ~~ 暂时没有关注店铺 ~~
      </view>
    </template>

  </view>
</template>

<script>
import uniRate from '@/components/uni-rate/uni-rate.vue'

export default {
  components: {
    uniRate,
  },
  name: "followShop",
  data(){
    return {
      followList: [],
      pagesize: 22,
      page: 1,
    }
  },
  created(){
    this.getFollowList()
  },
  methods:{
    getFollowList(){
      let that = this;
      let data = {
        pagesize: this.pagesize,
        page: this.page,
      }
      that.$Request.request('/api/shop/favoritelist', 'GET', data).then(res => {
        if (res.status == 1) {
          console.log(res);
          this.followList = res.data.list;
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 关注店铺
    followShopHandle(shopId){
      let that = this;
      let url ='';

      uni.showModal({
        title: '温馨提示',
        content: '确认是否取消关注！',
        success: function(res) {
          console.log(res);
          if (res.confirm) {
            that.followCore('/api/shop/unfavorite', shopId)
            console.log(url);
          } else{
            return ;
          }
        }
      })
    },
    followCore(url, shopId){
      let that = this;
      let data = {
        shopId
      }
      that.$Request.request(url, 'POST', data).then(res => {
        if (res.status == 1) {
          this.followList = this.followList.filter((shop, index)=>{
            if (shopId !== shop.shopId){
              return true;
            }
          })
          uni.showToast({
            title: res.msg,
            duration: 2000
          });
        }
      }).catch(err => {
        console.log(err)
      })
    },
    unFollowHandle(){
      uni.showModal({
        title: '温馨提示',
        content: '是否取消关注',
        success: function(res) {

        }
      });
    }
  }
}
</script>

<style scoped lang="scss">
.follow-shop-item{
  width: 100%;
  min-height: 100vh;
  padding: 36rpx 32rpx;
  box-sizing: border-box;
  background: #f5f5f5;
  margin-bottom: 20rpx;

  .shop-item{
    background: white;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    padding: 20rpx;
    height: 180rpx;
    display: flex;
    justify-content: space-between;

    .cover{
      align-self: center;
      width: 130rpx;
      height: 130rpx;
      image{
        width: 100%;
        height: 100%;
      }
    }

    .info{
      width: calc(100% - 150rpx);

      .shop-name{
        display: block;
        font-size: 32rpx;
        font-weight: 400;
        @include nowraps(2);
      }

      .other{
        display: flex;
        justify-content: space-between;

        .score{
          display: flex;
          margin-top: 15rpx;
          font-size: 18rpx;
          .uni-rate{
            padding-top: 10rpx;
            align-self: center;
          }
        }

        .follow-operation{
          padding: 5rpx 30rpx;
          background: rgb(238, 91, 37);
          color: white;
          border-radius: 40rpx;
          font-size: 28rpx;
        }
      }
    }

  }

  .empty{
    width: 400rpx;
    text-align: center;
    margin: 0 auto;
    margin-top: 100rpx;
  }
}

</style>
